<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4.键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <!-- 按下回车 -->
      <input type="text" @keyup.Enter="showLog1" placeholder="按下回车提示输入"> <br>
      <!-- <input type="text" @keyup.enter="showLog1" placeholder="按下回车提示输入"> <br> -->
      <!-- <input type="text" @keyup.13="showLog1" placeholder="按下回车提示输入"> <br> -->

      <!-- 按下删除 -->
      <input type="text" @keyup.delete="showLog1" placeholder="按下删除提示输入"> <br>
      <!-- 按下退出 -->
      <input type="text" @keyup.esc="showLog1" placeholder="按下退出提示输入"> <br>
      <!-- 按下空格 -->
      <input type="text" @keyup.space="showLog1" placeholder="按下空格提示输入"> <br>
      <!-- 按下换行 -->
      <input type="text" @keydown.tab="showLog1" placeholder="按下换行提示输入"> <br>
      <hr>
      <!-- 按下上 -->
      <input type="text" @keyup.up="showLog1" placeholder="按下上提示输入"> <br>
      <!-- 按下下 -->
      <input type="text" @keyup.down="showLog1" placeholder="按下下提示输入"> <br>
      <!-- 按下左 -->
      <input type="text" @keyup.left="showLog1" placeholder="按下左提示输入"> <br>
      <!-- 按下右 -->
      <input type="text" @keyup.right="showLog1" placeholder="按下右提示输入"> <br>
      <hr>
      <h2>下面的代码了解即可</h2>
      <input type="text" @keydown.ctrl="showLog1" placeholder="按下ctrl提示输入"><br>
      <input type="text" @keydown.alt="showLog1" placeholder="按下alt提示输入"><br>
      <input type="text" @keydown.shift="showLog1" placeholder="按下shift提示输入"><br>
      <input type="text" @keydown.meta="showLog1" placeholder="按下meta提示输入">
      <hr>
      <input type="text" @keyup.ctrl="showLog1" placeholder="按下ctrl提示输入"><br>
      <input type="text" @keyup.alt="showLog1" placeholder="按下alt提示输入"><br>
      <input type="text" @keyup.shift="showLog1" placeholder="按下shift提示输入"><br>
      <input type="text" @keyup.meta="showLog1" placeholder="按下meta提示输入">
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        methods:{
          showLog1(e){
            console.log(e.target.value)
          }
        }
      })
    </script>
  </body>
</html>